<template>
  <div>
    <!-- data展示数据 -->
    <!-- tree-props="{ children: '判断是否有子菜单', -->
    <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="规格编号"> </el-table-column>
      <el-table-column prop="specsname" label="规格名称"> </el-table-column>
      <el-table-column label="规格属性">
         <template slot-scope="scope">
          <!-- scope?可以找到每一项里面的内容 -->
        <el-tag v-for="i in scope.row.attrs" :key="i">{{i}}</el-tag>
        </template>
      </el-table-column>
    
     
      <el-table-column prop="" label="状态">
        <template slot-scope="scope">
          <!-- scope?可以找到每一项里面的内容 -->
          <el-button
            type="paimary"
            v-if="scope.row.status == 1"
            @click="gets(scope)"
            >启用</el-button
          >
          <el-button type="default" v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <el-button type="paimary" @click="willedit(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!-- 分页组件  -->
        <el-pagination
          layout="prev, pager, next"    
          :total="total"
          :page-size="size"
          background
           @current-change="changePage"
        >
        </el-pagination>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqcatedelete, reqroledelete, reqspecsdelete } from '../../../http/api';
import { successAlert } from "../../../utils//alert";
export default {
 
  data() {
    return {
   
    };
  },
  computed: {
    ...mapGetters({
      list:"specs/list",
      total:"specs/total",
      page:"specs/page",
      size:"specs/size"
    }),
  },
  

  methods: {
    ...mapActions({
      reqList:"specs/reqList",
      changePage:"specs/changePage"
      
    }),
   

    // gets(s){
      // scope的值
    // console.log(s);
    // },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
        reqspecsdelete({id:id}).then(res=>{
           if(res.data.code==200){
               successAlert(res.data.msg)
              // 刷列表
             this.reqList()
           }
         })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 点击编辑弹框出现
    willedit(id) {
      // 通知父组见点击编辑附带id
      this.$emit("willdeit",id);
    },
  },
   mounted(){
     console.log(111);
    this.reqList()
  },
 
};
</script>
 <style lang="less" scoped>
@import "../../../less/index.less";
img{
  height: 80px;
  width: 80px;
}
</style>